<template>
  <div id="detail">
    <detail-nav-bar :top-images="topImages" @itemClick="titleClick" :current-index="currentIndex" class="detail-nav" />
    <scroll ref="scroll" class="content" :probe-type='3' @scroll="contentScroll">
      <detail-swiper :top-images="topImages" />
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop" />
      <detail-goods-info ref="goods" :detail-info="detailInfo" @detailImageLoad="detailImageLoad"/>
      <detail-param-info ref="params" :param-info="paramInfo" />
      <detail-comment-info ref="comments" :comment-info="commentInfo" />
      <detail-recommend-info ref="recommends" :recommend-list="recommendList" />
      <!-- <goods-list :goods="recommendList" /> -->
    </scroll>
    <back-top @click.native="backTopClick" v-show="isShowBackTop"/>
    <detail-bottom-bar @addToCart="addToCart" />
  </div>
</template>

<script>
  import DetailNavBar from './childComps/DetailNavBar'
  import DetailSwiper from './childComps/DetailSwiper'
  import DetailBaseInfo from './childComps/DetailBaseInfo'
  import DetailGoodsInfo from './childComps/DetailGoodsInfo'
  import DetailShopInfo from './childComps/DetailShopInfo'
  import DetailParamInfo from './childComps/DetailParamInfo'
  import DetailCommentInfo from './childComps/DetailCommentInfo'
  import DetailRecommendInfo from './childComps/DetailRecommendInfo'
  // import GoodsList from 'components/content/goods/GoodsList'
  import DetailBottomBar from './childComps/DetailBottomBar'

  import Scroll from 'components/common/scroll/Scroll'

  import {itemListenerMixin, backTopMixin} from 'common/mixin'
  // import {debounce} from 'common/utils'

  import { getDetail, getRecommend, Goods, Shop, GoodsParam } from 'network/detail'

  import {mapActions} from 'vuex'
  export default {
    name: "Detail",
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailGoodsInfo,
      DetailShopInfo,
      DetailParamInfo,
      DetailCommentInfo,
      DetailRecommendInfo,
      DetailBottomBar,
      // GoodsList,
      Scroll
    },
    mixins: [itemListenerMixin, backTopMixin],//混入
    data(){
      return{
        iid: null,
        topImages: [],
        goods: {},
        shop: {},
        detailInfo: {},
        paramInfo: {},
        commentInfo: {},
        recommendList: [],
        themeTopYs: [],
        getThemeTopY: null,
        currentIndex: 0,
        // isShowBackTop: false
      }
    },
    created(){
      //1.保存传入的iid
      this.iid = this.$route.params.iid

      //2.根据iid请求详情数据
      getDetail(this.iid).then(res => {
        //1.获取顶部的轮播图数据
        const data = res.result;
        this.topImages = data.itemInfo.topImages

        //2.获取商品信息
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

        //3.创建店铺信息的对象S
        this.shop = new Shop(data.shopInfo)

        //4.保存商品的详情数据
        this.detailInfo = data.detailInfo

        //5.获取参数的信息
        this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)

        //6.获取评论信息
        if(data.rate.cRate !== 0){
          this.commentInfo = data.rate.list[0]
        }
        //获取值不对
        // this.$nextTick(() => {
        //   this.getOffsetTops()
        // })
      }),
      //3.请求推荐数据
      getRecommend().then((res, err) => {
        if(err) return
        this.recommendList = res.data.list
      })
      //4.给getThemeTopY赋值(对给this.themeTopYs赋值的操作进行防抖)
      // this.getThemeTopY = debounce(() => {
      //   console.log(111111111111111)
      //   this.themeTopYs = []
      //   this.themeTopYs.push(0)
      //   this.themeTopYs.push(this.$refs.params.$el.offsetTop)
      //   this.themeTopYs.push(this.$refs.comments.$el.offsetTop)
      //   this.themeTopYs.push(this.$refs.recommends.$el.offsetTop)
      //   console.log(this.themeTopYs)
      // }, 100)
    },
    updated(){
      //获取需要的四个offsetTop
      this.getOffsetTops()
    },
    methods: {
      ...mapActions(['addCart']),
      getOffsetTops(){
        this.themeTopYs = []
        this.themeTopYs.push(0)
        this.themeTopYs.push(this.$refs.params.$el.offsetTop)
        this.themeTopYs.push(this.$refs.comments.$el.offsetTop)
        this.themeTopYs.push(this.$refs.recommends.$el.offsetTop)
        this.themeTopYs.push(Number.MAX_VALUE)
        console.log(this.themeTopYs)
      },
      detailImageLoad(){
        this.newRefresh()
        // this.getThemeTopY()  //防抖方案我试了没效果，没有找到问题出在哪里
      },
      titleClick(index){
        this.currentIndex = index
        this.$refs.scroll.scrollTop(0, -this.themeTopYs[index], 100)
      },
      contentScroll(position){
        //1.获取y的值
        const positionY = -position.y

        let len = this.themeTopYs.length
        //2.positionY在0和 之间
        for(let i = 0; i < len - 1; i++){
          /**
           * 判断的方案:
           *  方案一:
           *    条件: (i < (length-1) && currentPos >= iPos && currentPos < this.themeTops[i+1]) || (i === (length-1) && currentPos >= iPos),
           *    优点: 不需要引入其他的内容, 通过逻辑解决
           *    缺点: 判断条件过长, 并且不容易理解
           *  方案二:
           *    条件: 给themeTops最后添加一个很大的值, 用于和最后一个主题的top进行比较.
           *    优点: 简洁明了, 便于理解
           *    缺点: 需要引入一个较大的int数字
           * 疑惑: 在第一个判断中, 为什么不能直接判断(currentPos >= iPos)即可?
           * 解答: 比如在某一个currentPos大于第0个时, 就会break, 不会判断后面的i了.
           */
          if(positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1]){
            if(this.currentIndex != i) {
              this.currentIndex = i
            }
            break
          }
        }

        //3.是否显示回到顶部
        // this.isShowBackTop = (-position.y) > 1000
        this.listenShowBackTop(position)
      },
      addToCart(){
        //加入购物车
        //1.获取购物车需要展示的信息
        const product = {}
        // 2.对象信息
        product.iid = this.iid;
        product.imgURL = this.topImages[0]
        product.title = this.goods.title
        product.desc = this.goods.desc;
        product.price = this.goods.realPrice;
        // 3.添加到Store中 (1.promise 2.mapActions 的映射)
        // this.$store.commit('addCart', product)
        // this.$store.dispatch('addCart', product).then(res => {
        //   console.log(res)
        // })
        this.addCart(product).then(res => {
          //调用公共提示方法
          this.$toast.showMessage(res)
        })
      }
    },
    mounted(){
    },
    destroyed(){
      this.$bus.$off('itemImgLoad', this.itemImgListener)
    }
  }
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }

  .detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
  }

  .content {
    height: calc(100% - 44px - 49px);
  }
</style>
